<template>
  <div class="main">
    <!-- 环境数据监测 -->
    <div class="farm-main">
      <div class="tr-sid">
        <div class="sid-head">设备列表</div>
        <div class="sid-tree">
          <Equiplist @selectionChange="selectionChange" />
        </div>
      </div>
      <div class="tab-box">
        <div class="tab-box-con-one">
          <div class="base-info-box">
            <div class="equipMap">
              <div class="timeSearch">
                <el-date-picker v-if="nowserchtype" v-model="startTime" :disabled="clickAble" type="datetime"
                  placeholder="开始时间" style="width:200px; margin-right: 5px; margin-left: 5px;"
                  value-format="yyyy-MM-dd HH:mm:ss" />
                <el-date-picker v-if="nowserchtype" v-model="endTime" :disabled="clickAble" type="datetime"
                  placeholder="结束时间" style="width:200px;" value-format="yyyy-MM-dd HH:mm:ss" />
                <el-date-picker v-if="!nowserchtype" :disabled="clickAble" v-model="monthtime" type="month"
                  placeholder="选择月" value-format="yyyy-MM" @change="yuechange"
                  style="width: 200px; margin-right: 5px;  margin-left: 5px;" />
                <el-select v-if="!nowserchtype" :disabled="clickAble" v-model="nowday" prefix-icon="el-icon-date"
                  placeholder="选择工作日" @change="getEquementWays()" style="width: 200px;">
                  <i slot="prefix" class="el-input__icon el-icon-date"></i>
                  <el-option v-for="(item, index) in haveday" :key="index" :label="item.workTime"
                    :value="item.workTime"></el-option>
                </el-select>
                <el-button v-if="!this.nowserchtype" :disabled="clickAble" type="primary" size="mini"
                  style="margin-left:10px;" round icon="el-icon-sort" @click="changeSearchType()">按时间段</el-button>
                <el-button :disabled="clickAble" v-if="this.nowserchtype" type="primary" size="mini"
                  style="margin-left:10px;" round icon="el-icon-sort" @click="changeSearchType()">按日期</el-button>
                <el-button :disabled="clickAble" type="primary" size="mini" style="margin-left:10px;" round
                  icon="el-icon-search" @click="getEquementWays()">查询</el-button>
              </div>
              <div v-if="!clickAble" class="top-left">
                <div style="text-align: center;">农机信息</div>
                <div>当前农机状态：{{ nowMachineStatus }}</div>
                <div>联系电话：{{ nowmachineMessage.farmerPhone || '无' }}</div>
                <div>最后更新时间：{{ nowmachineMessage.updatedTime || '无' }}</div>
                <div style="text-align: center;" @click="getEquementWays('new')">
                  <button class="button2">
                    <i class="el-icon-view"></i> 查看农机实时轨迹
                  </button>
                </div>
                <!-- <div style="text-align: center;" @click="getmachinesAdress()">
                  <button class="button2">
                    <i class="el-icon-view"></i>查看农机实时位置
                  </button>
                </div>-->
                <!-- 当前 -->
                <div>
                  查看当前动态轨迹:
                  <button @click="getLastestline()" class="button1">{{ button1Name }}</button>
                </div>
                <!-- 实时 -->
              </div>
              <!-- <div v-if="clickAble" class="top-left" style="width:150px">
                <div style="text-align: center;">农机信息</div>
                <div>设备无序列号</div>
                <div>无法获取农机信息</div>
              </div> -->
              <!-- <div class="waringShow">提示：{{ waringMessage }}</div> -->
              <el-amap :amap-manager="amapManager" :expandZoomRange="true" :center="center" vid="amap-vue"
                mapStyle="fresh" :zoom="zoom" :zooms="[5, 20]" :plugin="plugin">
                <el-amap-polyline :strokeColor="'#db281bec'" :editable="polyline.editable" :path="polyline.path"
                  :events="polyline.events"></el-amap-polyline>
                <!-- 实时轨迹 -->
                <!-- <el-amap-polyline
                  :strokeColor="'#fffff'"
                  :editable="false"
                  :path="nowlinelist"
                ></el-amap-polyline>-->
                <!-- 标记 -->
                <!-- <el-amap-marker
                  :position="nowmachineMessage.postionlist"
                  :icon="iconsrcmet()"
                  title="农机当前位置"
                ></el-amap-marker>-->
                <!-- animation="AMAP_ANIMATION_DROP" -->
                <el-amap-marker :position="center" :icon="iconsrcmet()" title="农机起点"></el-amap-marker>
              </el-amap>
            </div>

            <ul class="data-info-box">
              <li v-for="(item, index) in dataItemList" :key="index" class="one-dataItem-box">
                <!-- @click="clickbottom(item)" -->
                <Bluecard :showData="false" :now-card-message="item" />
              </li>
            </ul>
          </div>
          <div class="base-info-box-font">
            <Box title="基础信息">
              <template v-slot:notitlebox>
                <!-- 图片 -->
                <div class="base-info-box-img">
                  <el-image v-if="pictureList.length > 0" :src="pictureData" :preview-src-list="pictureList" />
                  <!-- <img v-if="startShow" :src="require('../../../assets/machine/machine1.png')" alt />
                   -->
                   <svg-icon v-if="startShow" style="width: 100%;height: auto;" icon-class='zanwutupian'></svg-icon>
                   <!-- <svg-icon v-if="!startShow && dataItemList.length <= 0" style="width: 100%;height: auto;" icon-class='zanwutupian'></svg-icon> -->
                   <svg-icon v-if="!startShow && !equipmentObj.equipmentCode" style="width: 100%;height: auto;" icon-class='zanwutupian'></svg-icon>

                </div>
                <div class="base-info-context">
                  <p :style="{ color: getColor(standingBookObject.status) }" class="base-info-box-font-item">
                    <span style="color: #FFF">设备状态：</span>
                    {{
            standingBookObject.status
              ? getstatus(standingBookObject.status)
              : ""
          }}
                  </p>
                  <p class="base-info-box-font-item">
                    设备编号：{{
              standingBookObject.equipmentCode
                ? standingBookObject.equipmentCode
                : "--"
            }}
                  </p>
                  <p class="base-info-box-font-item">
                    设备名称：{{
              standingBookObject.equipmentName
                ? standingBookObject.equipmentName
                : "--"
            }}
                  </p>
                  <p class="base-info-box-font-item">
                    设备型号名称：{{
              standingBookObject.equModel
                ? standingBookObject.equModel.modelName
                : "--"
            }}
                  </p>
                  <p class="base-info-box-font-item">
                    是否可自动驾驶：{{
              standingBookObject
                ? standingBookObject.selfDriving === true
                  ? "是"
                  : "否"
                : "--"
            }}
                  </p>
                </div>
              </template>
            </Box>
          </div>
        </div>
      </div>
    </div>
    <Linedialog ref="Linedialog" :show.sync="dialogVisible" :equipment-name="equipmentObj.equipmentName"
      :data-item-id="dataItemId" :equipment-code="equipmentObj.equipmentCode" @closeDialog="closeDialog" />
  </div>
</template>
<script>
// import Vue from "vue";
import axios from "axios";
import Equiplist from "@/components/EquipList/equiplist-operation.vue";
import Bluecard from "./component/bluecard.vue";
import physicalUnionDataApi from "@/api/physical-union-monitoring/physical-union-data/index";
import { mymixin } from "@/utils/mixin";
import Box from "./component/box.vue";
import Linedialog from "./component/linedialog.vue";
import equipStandingBookApi from "@/api/equip-manage/equip-standing-book";
// import equipPurchaseRecordApi from "@/api/equip-manage/equip-purchase-record";
import documentApi from "@/api/document";
import fenceManageApi from "@/api/basic-info-manage/fence-management";

import { AMapManager } from "vue-amap";
var amapManager = new AMapManager();
export default {
  name: "PhysicalUnionData",
  components: { Equiplist, Bluecard, Box, Linedialog },
  mixins: [mymixin],
  data() {
    return {
      waringMessage: "正常",
      temporaryPath: [],
      temporarySort: 0,
      button1Name: "开始",
      timelyWays: null,
      lastestAdress: [], //实时地址
      nowmachineMessage: {},
      nowMachineStatus: "",
      workAreaList: [],
      nowlinelist: [],
      monthtime: "",
      nowday: "",
      haveday: [],
      startTime: "",
      endTime: "",
      nowserchtype: false,
      amapManager,
      nowmachinetypeid: 96, //当前农机id
      startShow: false,
      pictureData: "",
      pictureList: [],
      clickAble: false,
      // 当前选中的数据项
      nowSelectDataItemId: 0,
      // 当前设备数据
      // 当前选中设备
      equipmentObj: {
        equipmentName: "",
        equipmentCode: "",
        machineTypeId: 96,
        imei: "",
      },
      // 查询按钮
      showSearch: true,
      // 弹框相关
      dialogVisible: false,
      // ---环境数据相关
      dataItemList: [],
      // 最下面的当前的数据项列表
      nowClickList: [],
      // 设备台账
      standingBookObject: {},
      // 设备台账
      purchaseObject: {},
      // 当前的设备数据项
      dataItemId: 0,
      statusArr: [
        {
          name: "启用",
          id: "ENABLE",
        },
        {
          name: "废弃",
          id: "DISCARD",
        },
        {
          name: "维修中",
          id: "REPAIRING",
        },
        {
          name: "禁用",
          id: "DISABLE",
        },
      ],
      iconlist: [
        {
          machineid: 39,
          machinesrc: require("@/assets/map/machine1.png"),
        }, //拖拉机
        {
          machineid: 7,
          machinesrc: require("@/assets/map/machine2.png"),
        }, //收割机
        {
          machineid: 3,
          machinesrc: require("@/assets/map/machine3.png"),
        }, //旋耕机
      ],
      nowlinelist: [],
      // center: [121.18403256919758, 30.895852469867137],
      center: [120.13284,30.796168],
      zoom: 17,
      polyline: {
        path: [],
        events: {},
        editable: false,
      },
      plugin: [
        {
          // 定位
          // pName: "Geolocation",
          pName: "MapType",
          defaultType: 1,
          // showRoad和showTraffic 为路网和路况
          showRoad: true,
          showTraffic: false,
          events: {
            init(o) { },
          },
        },
      ],
    };
  },
  watch: {},
  mounted() {
    this.queryonInfoByCondition()
  },
  methods: {


     queryonInfoByCondition() {
      this.$nextTick(async () => {
        const { data: onInfo } = await fenceManageApi.queryonInfoByCondition();
        if (onInfo) {
          this.bd09togcj02(onInfo.longitude, onInfo.latitude)
        }
      })
    },
    bd09togcj02(bd_lng, bd_lat) {
      const x = bd_lng - 0.0065;
      const y = bd_lat - 0.006;
      const z = Math.sqrt(x * x + y * y) - 0.00002 * Math.sin(y * Math.PI);
      const theta = Math.atan2(y, x) - 0.000003 * Math.cos(x * Math.PI);
      const gg_lng = z * Math.cos(theta);
      const gg_lat = z * Math.sin(theta);
      console.log([gg_lng, gg_lat])
      this.$set(this.center, 0, gg_lng);
      this.$set(this.center, 1, gg_lat);
      return [gg_lng, gg_lat];
    },
    // 查询最新轨迹
    getLastestline() {
      let that = this;
      if (this.button1Name === "开始" || this.button1Name === "重播") {
        this.button1Name = "暂停";
        let sort = this.temporarySort;
        this.polyline.path = this.temporaryPath;
        this.timelyWays = setInterval(() => {
          if (sort >= that.lastestAdress.length) {
            this.button1Name = "重播";
            this.temporarySort = 0;
            this.temporaryPath = [];
            clearInterval(that.timelyWays);
            return;
          }
          that.center = that.lastestAdress[sort];
          that.polyline["path"].push(that.lastestAdress[sort]);
          that.temporaryPath.push(that.lastestAdress[sort]);
          sort++;
          that.temporarySort++;
        }, 100);
      } else if (this.button1Name === "暂停") {
        this.button1Name = "开始";
        clearInterval(that.timelyWays);
        this.polyline.path = this.temporaryPath;
      }
    },
    // 查询设备地址
    getmachinesAdress() { },
    // 查询
    dateSearch() { },
    // 切换筛选模式
    changeSearchType() {
      this.nowserchtype = !this.nowserchtype;
    },
    // 获取农机状态&信息
    getmachinestau() {
      if (!this.equipmentObj.imei) {
        return;
      }
      let data = {
        farmMachineImei: this.equipmentObj.imei,
      };
      axios
        .get(
          `https://tdiot.cloud/iotApplication/farmMachine/queryInfo?farmMachineImei=${data.farmMachineImei}`
        )
        .then((res) => {
          let zdata = res.data.data;
          if (res.data.code === -1) {
            this.nowMachineStatus = "暂无数据";
          }
          if (zdata) {
            if (zdata.farmMachineState == 0) {
              this.nowMachineStatus = "离线";
            } else if (zdata.farmMachineState == 1) {
              this.nowMachineStatus = "开机";
            } else if (zdata.farmMachineState == 1) {
              this.nowMachineStatus = "工作中";
            }
            this.nowmachineMessage = zdata;
            this.nowmachineMessage["postionlist"] = [
              zdata.farmMachineLng,
              zdata.farmMachineLat,
            ];
            this.center = this.nowmachineMessage["postionlist"];
          }
        });
    },
    // 选择年月&获取设备在运作的日期
    yuechange(e) {
      // this.nowday = "";
      if (!this.equipmentObj.imei) {
        // this.$message.warning(
        //   "此设备无序列号，工作数据获取失败，不可进行后续操作"
        // );
        this.waringMessage = "该设备无序列号，无法获取轨迹";
        this.center = [121.18403256919758, 30.895852469867137];
        this.clickAble = true;
        return;
      }
      let that = this;
      let data = {
        farmMachineImei: this.equipmentObj.imei,
        startTime: this.monthtime,
      };
      axios({
        // url: `https://tdiot.cloud/iotApplication/farmMachineWork/queryDay`,
        url: this.$baseurl.webServiceUrl + `v3/iotsheep/iotPlatform/farmMachineWork/queryDay`,
        data: data,
        method: "post",
      })
        .then((res) => {
          if (res.data.code === 1) {
            let zhday = res.data.data;
            let newzhday = [];
            zhday.forEach((item) => {
              newzhday.push({ workTime: that.setmothday(item) });
            });
            that.haveday = newzhday;
            if (that.haveday.length > 0) {
              that.nowday = "";
              // that.nowday = that.haveday[that.haveday.length - 1].workTime;
              that.nowday = that.haveday[0].workTime;
              that.getEquementWays(); // 获取路线
            } else {
              // that.$message.warning("该月份农机没有行动轨迹，请切换月份");
              this.waringMessage = "该月份无行动轨迹，请切换月份";
            }
          }
        })
        .catch((err) => {
          that.$message.error("网络连接失败2");
          this.waringMessage = "网络连接失败2";
        });
    },
    setmothday(originDate) {
      const dt = new Date(originDate);
      const y = dt.getFullYear();
      const m = (dt.getMonth() + 1 + "").padStart(2, "0");
      const d = (dt.getDate() + "").padStart(2, "0");
      // return `${y}-${m}-${d}`;
      return `${m}-${d}`;
    },
    // 获取设备轨迹路线
    getEquementWays(e) {
      this.button1Name = "开始";
      if (!this.nowday) {
        this.showSearch = true;
      } else {
        this.showSearch = false;
      }
      if (!this.equipmentObj.imei) {
        this.center = [121.18403256919758, 30.895852469867137];
        return;
      }
      const loading = this.$loading({
        lock: false,
        text: "路线绘制中",
        spinner: "el-icon-loading",
        background: "rgba(0, 0, 0, 0.7)",
      });
      let that = this;
      let data = {};
      if (e === "new") {
        let timestamp = new Date().getTime();
        this.monthtime = this.dateToFormatTwo(timestamp);
        this.nowday = "05-21";
        data = {
          farmMachineImei: this.equipmentObj.imei,
          startTime: `2023-05-21 00:00:00`,
          endTime: `2023-05-21 23:59:59`,
        };
      } else {
        if (this.nowserchtype) {
          // 时间段
          data = {
            farmMachineImei: this.equipmentObj.imei,
            startTime: this.startTime,
            endTime: this.endTime,
          };
        } else {
          // 天
          let year = this.monthtime.substring(0, 4);
          data = {
            farmMachineImei: this.equipmentObj.imei,
            startTime: `${year}-${this.nowday} 00:00:00`,
            endTime: `${year}-${this.nowday} 23:59:59`,
          };
        }
      }
      axios({
        // url: `https://tdiot.cloud/iotApplication/farmMachineRun/queryByCondition`,
        url: this.$baseurl.webServiceUrl + `v3/iotsheep/iotPlatform/farmMachineRun/queryByCondition`,
        data: data,
        method: "post",
      })
        .then((res) => {
          loading.close();
          // that.currentWindow.visible = true;
          let farmMachineRunList = res.data.data.farmMachineRunList;
          if (farmMachineRunList.length === 0) {
            // that.$message.warning("当前时间，无农机轨迹数据,请选择其他时间段");
            this.waringMessage = "当前时间段无行动轨迹,请选择其他时间段";
            return;
          }
          that.polyline["path"] = [];
          that.lastestAdress = [];
          farmMachineRunList.forEach((item, index) => {
            let lng = item.runLng - -0.0045;
            let lat = item.runLat - 0.0023;
            let zj = [lng, lat];
            that.polyline["path"].push(zj);
            that.lastestAdress.push(zj);
          });
          this.waringMessage = "正常";
          that.center = that.polyline.path[0];
          that.workAreaLmet(res.data.data.workAreaList);
        })
        .catch((err) => {
          loading.close();
          // that.$message.error("网络连接失败3");
        });
    },
    // 机器图片返回方法
    iconsrcmet() {
      // return
      let id = this.equipmentObj.nowmachinetypeid;
      if (id === 39) {
        let src = this.iconlist[0]["machinesrc"];
        return src;
      } else if (id === 7) {
        let src = this.iconlist[1]["machinesrc"];
        return src;
      } else if (id === 3) {
        let src = this.iconlist[2]["machinesrc"];
        return src;
      } else {
        // let src = this.iconlist[0]["machinesrc"];
        return false;
      }
    },
    // 作面积同意处理方法
    workAreaLmet(list) {
      this.workAreaList = [];
      if (list.length !== 0) {
        list.forEach((item, index) => {
          item.workArea = parseFloat(item.workArea).toFixed(2);
          this.workAreaList.push(item);
        });
      }
    },
    // 获取图片
    getPicture(params) {
      this.pictureList = [];
      this.startShow = false;
      documentApi.queryPictureList(params).then((res) => {
        if (res.code === 1) {
          if (res.data.length > 0) {
            res.data.forEach((a) => {
              this.pictureList.push(
                // "data:application/*;base64," + a.pictureData
                a.pictureData ? "data:application/*;base64," + a.pictureData : a.filePath
              );
            });
            this.pictureData = this.pictureList[0].pictureData ? "data:application/*;base64," + this.pictureList[0].pictureData : (this.pictureList[0]?.filePath || this.pictureList[0]);
          } else {
            this.startShow = true;
          }
        } else {
          this.startShow = true;
        }
      });
    },
    getColor(status) {
      var color = "rgb(227, 56, 56)";
      if (status === "ENABLE") {
        color = "#23EAE5";
      } else if (status === "REPAIRING") {
        color = "rgb(238, 139, 40)";
      }
      return color;
    },
    getstatus(data) {
      var name = "";
      var index = this.statusArr.findIndex((a) => a.id === data);
      if (index !== -1) {
        name = this.statusArr[index]["name"];
      }
      if (name === "启用") {
        name = '启用' || "作业中";
      } else {
        name = "未启动";
      }
      return name;
    },
    // 选择设备传出选择的该设备信息
    async selectionChange(e) {
      this.clickAble = false;
      this.equipmentObj = {
        equipmentName: e.equipmentName,
        equipmentCode: e.equipmentCode,
        machineTypeId: e.machineTypeId,
        imei: e.imei,
      };
      await this.queryAllLatestData();
      if (e.equipmentName.indexOf("收割机") !== -1) {
        this.dataItemList = [
          // {
          //   dataItemName: "油箱容积",
          //   latestValue: "200L",
          // },
          // {
          //   dataItemName: "水箱温度",
          //   latestValue: "50.7℃",
          // },
          // {
          //   dataItemName: "粮仓容积",
          //   latestValue: "800L",
          // },
        ];
      } else if (e.equipmentName.indexOf("旋耕机") !== -1) {
        this.dataItemList = [
          // {
          //   dataItemName: "油箱容积",
          //   latestValue: "180L",
          // },
          // {
          //   dataItemName: "水箱温度",
          //   latestValue: "43.7℃",
          // },
          // {
          //   dataItemName: "旋耕刀速度",
          //   latestValue: "280rmin",
          // },
        ];
      } else if (e.equipmentName.indexOf("拖拉机") !== -1) {
        this.dataItemList = [
          // {
          //   dataItemName: "油箱容积",
          //   latestValue: "80L",
          // },
          // {
          //   dataItemName: "水箱温度",
          //   latestValue: "63.2℃",
          // },
          // {
          //   dataItemName: "当前功率",
          //   latestValue: "3000kW",
          // },
        ];
      } else {
        this.dataItemList = [
          {
            dataItemName: "该设备未设置数据",
            latestValue: "--",
          },
        ];
      }
      this.temporaryPath = [];
      this.temporarySort = 0;
      this.nowClickList = [];
      let timestamp = new Date().getTime();
      // this.monthtime = this.dateToFormatTwo(timestamp);
      // this.nowday = this.dateToFormatTwo(timestamp).substring(5, 10);
      if (e.index === 0) {
        this.monthtime = "2022-05-30";
        this.nowday = "05-30";
      } else if (e.index === 1) {
        this.monthtime = "2021-11-16";
        this.nowday = "11-16";
      } else if (e.index === 2) {
        this.monthtime = "2021-11-16";
        this.nowday = "11-16";
      } else {
        this.monthtime = this.dateToFormatTwo(timestamp);
        this.nowday = this.dateToFormatTwo(timestamp).substring(5, 10);
      }
      this.startTime = `${this.dateToFormatTwo(timestamp)} 00:00:00`;
      this.endTime = this.dateToFormat(timestamp);
      this.getPicture(e.equipmentCode);
      this.queryStandingBook();
      this.yuechange(this.monthtime);
      this.getmachinestau();
    },
    // 查询设备数据项的最新数据
    queryAllLatestData() {
      this.dataItemList = [];
      return
      physicalUnionDataApi
        .queryAllLatestData(this.equipmentObj.equipmentCode)
        .then((res) => {
          if (res.code === 1) {
            let data = res.data || [];
            if (data.length > 0) {
              this.dataItemList = data;
            } else {
              this.dataItemList = [
                // {
                //   dataItemName: "地区-名称-控制类型PH",
                //   latestValue: "7.3PH",
                //   latestDate: "2023-5-12",
                // },
                // {
                //   dataItemName: "地区-名称-控制类型℃",
                //   latestValue: "33.3℃",
                //   latestDate: "2023-5-12",
                // },
                // {
                //   dataItemName: "地区-名称-控制类型PH",
                //   latestValue: "7.3PH",
                //   latestDate: "2023-5-12",
                // },
                // {
                //   dataItemName: "地区-名称-控制类型℃",
                //   latestValue: "33.3℃",
                //   latestDate: "2023-5-12",
                // },
                // {
                //   dataItemName: "地区-名称-控制类型PH",
                //   latestValue: "7.3PH",
                //   latestDate: "2023-5-12",
                // },
                // {
                //   dataItemName: "地区-名称-控制类型℃",
                //   latestValue: "33.3℃",
                //   latestDate: "2023-5-12",
                // },
                {
                  dataItemName: "该设备未设置数据",
                  latestValue: "--",
                },
              ];
            }
          } else {
            this.$message.error(res.msg);
          }
        }).catch(err=>{
          console.log(err)
        });
    },
    // 获取设备台账
    queryStandingBook() {
      equipStandingBookApi
        .query(this.equipmentObj.equipmentCode)
        .then((res) => {
          if (res.code === 1) {
            let data = res.data || {};
            this.standingBookObject = data;
          } else {
            this.$message.error("设备台账信息获取失败！");
          }
        });
    },
    // 点击下面的数据类别，展示弹框
    clickbottom(list) {
      this.dataItemId = list.dataItemId;
      this.dialogVisible = true;
    },
    closeDialog() {
      this.dialogVisible = false;
      this.dataItemId = 0;
    },
  },
};
</script>
<style lang="scss" scoped>
.vdr.active:before {
  display: none;
}

::v-deep .el-select .el-input__inner {
  color: #fff !important;
}

.card-style {
  width: 300px;
  height: 80px;
  margin-right: 10px;
}

.main {
  width: 100%;
  height: 100%;
}

.farm-main {
  width: 100%;
  height: 100%;
  padding: 10px 0;
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  align-items: center;

  .tr-sid {
    min-width: 200px;
    width: calc(16% - 10px);
    height: 100%;
    padding: 10px;
    background-color: #225768;

    .sid-head {
      width: 100%;
      height: 40px;
      line-height: 40px;
      font-size: 17px;
      text-align: center;
      border-bottom: #fff dashed 1px;
    }

    .sid-tree {
      width: 100%;
      height: calc(100% - 40px);
      overflow-y: hidden;
    }
  }

  .tab-box {
    width: calc(85% - 10px);
    height: 100%;
    overflow: auto;
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: flex-start;

    .tab-box-view {
      width: 100%;
      height: 50px;
      font-size: 18px;
      padding: 10px;
      background-color: #225768;
      display: flex;
      align-items: center;

      .tab-box-view-item {
        color: #ffffff;
        padding: 0 20px;
        border-left: 2px solid #ffffff;
      }

      .tab-box-view-item-status {
        background-color: rgba(0, 57, 71, 0.55);
        padding: 5px 30px;
        border-radius: 18px 18px 18px 18px;
        opacity: 1;
        border: 1px solid #003947;
      }
    }

    .tab-box-con-one {
      width: 100%;
      padding: 2px 10px 10px 10px;
      background-color: rgba(255, 255, 255, 0.04);
      border-radius: 0px 0px 0px 0px;
      display: flex;
      align-items: flex-start;
      justify-content: space-between;
    }
  }
}

.standing-book-box {
  height: 100%;
  width: calc(37% - 20px);
  background-color: #ffffff05;
  padding: 20px;

  .standing-book-box-item {
    width: 100%;
    font-size: 15px;
    padding: 10px;
    line-height: 35px;
    margin: 0;

    &:nth-child(odd) {
      background-color: #ffffff10;
    }
  }
}

.base-info-box {
  width: 80%;
  height: 100%;
  display: flex;
  flex-wrap: wrap;
  flex-direction: row;
  justify-content: space-between;
  align-items: center;

  .equipMap {
    font-size: 12px !important;
    position: relative;
    width: 100%;
    height: 84%;

    .waringShow {
      top: 3px;
      position: absolute;
      left: 620px;
      z-index: 100;
      width: auto;
      line-height: 38px;
      padding: 0 20px;
      height: 38px;
      border-radius: 4px;
      background-color: rgba(0, 57, 71);
    }

    .timeSearch {
      top: 2px;
      left: 3px;
      position: absolute;
      background-color: rgba(0, 57, 71);
      // border: 1px solid #82e5ff;
      border-radius: 4px;
      height: 40px;
      width: 606px;
      z-index: 100;
      display: flex;
      align-items: center;

      ::v-deep.el-input--medium .el-input__icon {
        height: 30px;
        line-height: 30px;
      }

      ::v-deep.el-input--medium .el-input__suffix {
        height: 30px;
        line-height: 30px;
      }

      ::v-deep.el-input .el-input__inner {
        font-size: 12px !important;
        height: 30px;
        line-height: 30px;
        color: #fff;
      }
    }

    .top-left {
      top: 40px;
      position: absolute;
      z-index: 99;
      margin-left: 5px;
      margin-top: 10px;
      border: 1px solid #08a311;
      border-radius: 5px;
      color: #fff;
      background-color: #26662a;
      padding: 10px;
      font-size: 14px;
      font-weight: 500;

      div {
        height: 26px;
      }

      .button1 {
        width: 50px;
        background-color: unset;
        border: 1px solid #fff;
        border-radius: 6px;
        color: #fff;
        height: 22px;

        &:hover {
          background-color: #4db854;
          border-color: #4db854;
          color: #fff;
        }
      }

      .button2 {
        background-color: unset;
        width: 170px;
        text-align: center;
        color: #ffffff;
        border: 1px solid #fff;
        border-radius: 5px;

        &:hover {
          background-color: #4db854;
          border-color: #4db854;
          color: #fff;
        }
      }

      .cha-search:hover {
        color: #409eff;
      }
    }
  }
}

.base-info-box-font {
  display: flex;
  flex-direction: row;
  justify-content: center;
  height: 100%;
  width: 20%;
  background-color: rgba(15, 69, 81);
  padding: 13px 20px 0px 20px;

  // border: #fff 1px solid;
  .base-info-context {
    margin-top: 20px;
    width: 100%;
    height: 68%;
    border: 1px solid #0091b7;
    background-color: #004e65;
    border-radius: 15px;
  }

  .base-info-box-img {
    height: calc(30% - 10px);
    width: 100%;
    // background-color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;

    ::v-deep .el-image {
      width: 100%;
      height: 100%;
      display: flex;
      justify-content: center;
      align-items: center;

      >img {
        height: 100%;
        width: auto;
        max-width: 100%;
      }
    }

    >img {
      height: 100%;
      width: auto;
      max-width: 100%;
    }
  }

  .base-info-box-font-item {
    float: left;
    min-width: 50%;
    max-width: 100%;
    font-size: 15px;
    padding: 3px 10px;
    line-height: 35px;
    margin: 0;
  }
}

.data-info-box {
  width: 100%;
  height: 16%;
  background-color: #ffffff05;
  padding: 5px 5px 0px 10px;
  overflow: hidden;
  overflow-x: auto;
  white-space: nowrap;

  .one-dataItem-box {
    display: inline-block;
    margin-right: 10px;
    width: calc(100% / 4.1);
  }
}
</style>
<style lang="scss">
// 生产环境会作用全局
.amap-icon img {
  width: 40px;
  height: 34px;
}

.amap-controls {
  display: none;
}

.amap-copyright {
  display: none;
}

.info-sty {
  background-color: #67c23a;
  cursor: pointer;
  padding: 5px 5px 2px 5px;
  color: #fff;
  white-space: nowrap;
  overflow: hidden;
  overflow-y: auto;
}
</style>
